import React, { Component, } from 'react'
import {
    Text, View, Image, ScrollView, Platform,
    TouchableOpacity, StyleSheet,
    TextInput, KeyboardAvoidingView,
    Keyboard
} from 'react-native'
import { connect } from 'react-redux';
import { SafeAreaView } from 'react-navigation'
import { NavigationHeader } from '../../components'
import { Px } from '../../utils'
import { Toast } from 'antd-mobile-rn'
import { ActionTypes } from '../../constants';


class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            phone: '',
            name: '',
            password: '',
            email: ''
        }
    }

    componentWillMount() {
    }

    render() {
        return (
            <SafeAreaView style={styles.container}>
                <NavigationHeader
                    title="注册"
                />
                <KeyboardAvoidingView style={styles.containView}>
                    <TouchableOpacity
                        activeOpacity={1}
                        onPress={() => {
                            Keyboard.dismiss()
                        }}
                    >
                    <View style={styles.phoneView}>
                        <View style={styles.textView}>
                            <Text>手机号</Text>
                        </View>
                        <TextInput
                            style={styles.phone}
                            placeholder="请输入手机号"
                            onChangeText={(text) => {
                                this.setState({
                                    phone: text
                                })
                            }}
                        />
                    </View>
                    <View style={styles.phoneView}>
                        <View style={styles.textView}>
                            <Text>用户名</Text>
                        </View>
                        <TextInput
                            style={styles.phone}
                            placeholder="请输入用户名"
                            onChangeText={(text) => {
                                this.setState({
                                    name: text
                                })
                            }}
                        />
                    </View>
                    <View style={styles.phoneView}>
                        <View style={styles.textView}>
                            <Text>密码</Text>
                        </View> 
                        <TextInput
                            style={styles.phone}
                            placeholder="请输入密码"
                            onChangeText={(text) => {
                                this.setState({
                                    password: text
                                })
                            }}
                        />
                    </View>
                    <View style={styles.phoneView}>
                        <View style={styles.textView}>
                            <Text>邮箱</Text>
                        </View>
                        
                        <TextInput
                            style={styles.phone}
                            placeholder="请输入邮箱"
                            onChangeText={(text) => {
                                this.setState({
                                    email: text
                                })
                            }}
                        />
                    </View>
                    {/* <View style={styles.verifyView}>
                        <TextInput
                            style={styles.verifyText}
                            placeholder="请输入验证码"
                        />
                        <TouchableOpacity style={styles.verifyButton}>
                            <Text style={styles.verifyButtonText}>获取验证码</Text>
                        </TouchableOpacity>
                    </View> */}
                    <TouchableOpacity
                        onPress={() => {
                            this._register()
                        }}
                        style={styles.registerBtn}>
                        <Text style={styles.registerText}>注册</Text>
                    </TouchableOpacity>
                    </TouchableOpacity>
                </KeyboardAvoidingView>
                {/* <KeyboardSpace /> */}
            </SafeAreaView>
        )
    }

    _register() {
        if (this.state.name.length === 0 ||
            this.state.phone.length === 0 ||
            this.state.email.length === 0 ||
            this.state.password.length ===0) {
            Toast.fail('请完整输入')
            return;
            }

        if (!this._validateEmail(this.state.email)) {
            Toast.fail('请输入正确的邮箱地址');
            return;
        }
        if (!this._validatePhone(this.state.phone)) {
            Toast.fail('请输入正确的手机号');
            return;
        }

        if (!this._validatePassword(this.state.password)) {
            Toast.fail('请输入至少六位密码')
            return;
        }
        // 注册API
        const data = {
            username: this.state.name,
            email: this.state.email,
            phone: this.state.phone,
            password: this.state.password
        }
        const callBack = this._registerSuccess.bind(this)
        actionUtil(ActionTypes.API_REGISTER, { data, callBack })
    }

    _validateEmail(email) {
        const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }

    _validatePhone(phone) {
        const reg = /^1[0-9]{10}$/;
        return reg.test(String(phone).toLowerCase());
    }

    _validatePassword(password) {
        if (password.length >=6) return true;
        return false;
    }

    _registerSuccess(response, error) {
        if (response) {
            Toast.show('注册成功')
        } else {
            console.log(error)
            Toast.fail('注册失败')
        }
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    containView: {
        flex: 1,
        backgroundColor: '#fff',
        paddingHorizontal: Px(24)
    },
    phoneView: {
        marginTop: Px(30),
        height: Px(60),
        flexDirection: 'row',
        alignItems: 'center'
    },
    phone: {
        backgroundColor: '#e9e9e9',
        height: '100%',
        borderRadius: Px(4),
        flex: 1,
        marginLeft: Px(24)
    },
    textView: {
        width: Px(120),
        alignItems: 'center',
        justifyContent: 'center'
    },
    verifyView: {
        marginTop: Px(30),
        height: Px(60),
        flexDirection: 'row'
    },
    verifyText: {
        backgroundColor: '#e9e9e9',
        height: '100%',
        flex: 3,
        borderRadius: Px(4)
    },
    verifyButton: {
        flex: 2,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#FC3F30',
        marginLeft: Px(20),
        borderRadius: Px(4)
    },
    verifyButtonText: {
        fontSize: Px(26),
        color: '#fff'
    },
    registerBtn: {
        backgroundColor: '#FC3F30',
        marginTop: Px(30),
        height: Px(60),
        alignItems: 'center',
        justifyContent: 'center'
    },
    registerText: {
        fontSize: Px(26),
        color: '#fff'
    }
});

export default connect(state => ({

})
)(Register)
